<template>
    <div class="header">
        <div class="leftTool">
            <img src="/src/assets/uiResources/定位.png" alt="">
            <span>{{ this.weathers.city }}</span>
            <span>{{ this.weathers.data.date }}</span>
            <span>{{ this.weathers.data.week }}</span>
            <span>{{ hour }} : {{ minute }} : {{ second }}</span>
            <div class="weather">
                <img src="/src/assets/uiResources/天气.png" alt="">
                <span>{{ this.weathers.data.type }}</span>
                <span>{{ this.weathers.data.low }} ~ {{ this.weathers.data.high }}</span>
                <span>PM2.5 - {{ this.weathers.air.aqi_name }}</span>
            </div>
        </div>
        <div class="title">地铁三维可视化管控平台</div>
    </div>
</template>

<script>
import { weather } from "../api/Weather";
export default {
    name: "nowTime",
    data() {
        return {
            hour: '',
            minute: '',
            second: '',
            weathers: {
                data: {},
                air: {}
            },
        };
    },
    mounted() {
        var timer = setInterval(() => {
            this.getNowTime()
        }, 500)
        weather().then((data) => {
            this.weathers = data
        })
    },
    // 组件销毁时关闭定时器
    beforeDestroy() {
        clearInterval(timer)
    },
    methods: {
        //获取当前时间
        getNowTime() {
            var date = new Date();
            var hour = date.getHours();  //时
            var minute = date.getMinutes();  //分
            var second = date.getSeconds();  //秒
            this.hour = this.addZero(hour)
            this.minute = this.addZero(minute)
            this.second = this.addZero(second)
        },

        //小于10的拼接上0字符串
        addZero(s) {
            return s < 10 ? ('0' + s) : s;
        },
    }
}

</script>
<style scoped lang="scss">
.header {
    width: 100%;
    height: 57px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../assets/uiResources/header.png');
    background-size: cover;
    display: flex;
    justify-content: center;
}

.title {
    font-family: '等线Bold';
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 2px;
    background: rgb(255, 255, 255);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 9%, rgba(211, 156, 50, 1) 57%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 3px;
}

.leftTool {
    position: absolute;
    left: 20px;
    top: 10px;
    display: flex;
    align-items: center;
    color: #fff;
    padding-left: 20px;
    font-size: 15px;
}

.leftTool img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.leftTool span {
    margin-right: 25px;
}

.weather {
    position: absolute;
    right: -1450px; // 右对齐
}

.weather img {
    width: 35px;
    height: 35px;
    top: -5px;
    position: relative;
}
</style>